<template>
  <div class="member-container">
    <div class="top-header">
      <a :class="{ memberActiveed: activeIndex === 0 }" @click="changeTab(0)"
        >会员账号</a
      >
      <a :class="{ memberActiveed: activeIndex === 1 }" @click="changeTab(1)"
        >会员积分</a
      >
      <a
        href="javascript:;"
        :class="{ memberActiveed: activeIndex === 2 }"
        @click="changeTab(2)"
        >会员套餐</a
      >
      <a
        href="javascript:;"
        :class="{ memberActiveed: activeIndex === 3 }"
        @click="changeTab(3)"
        >会员类型</a
      >
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Member",
  data() {
    return {
      activeIndex: 0,
    };
  },
  methods: {
    changeTab(index) {
      this.activeIndex = index;
      switch (index) {
        case 0:
          this.$router.push("/home/member/account");
          break;
          case 1:
          this.$router.push("/home/member/accountpoint");
          break;
          case 2:
          this.$router.push("/home/member/accountsuit");
          break;
        case 3:
          this.$router.push("/home/member/accounttype");
          break;
        default:
          this.$router.push("/home/member/account");
      }
    },
  },
  mounted() {
    // this.$router.push("/home/member/account");
  }
};
</script>

<style lang="less" scoped>
.member-container {
  height: 100%;
  .top-header {
    background-color: #324157;
    height: 60px;

    display: flex;
    > a {
      color: white;
      margin: auto 20px;
      cursor: pointer;
      &.memberActiveed {
        color: #20a0ff;
      }
    }
  }
}
</style>
